<!-- 系统账号 -->
<template>
  <div class="full-container">
    <page-main :white-bg="false" class="h100 flex-column">
      <div class="flex-row align-start">
        <SearchBarV2
          v-model:fields="searchForm"
          :form-schema="formItems"
          @search="search"
        />
        <div class="btn-wrapper">
          <el-button v-auth="'user_add'" type="primary" @click="addFn">
            <el-icon class="icon"><Plus /></el-icon>添加
          </el-button>
        </div>
      </div>
      <SchemaTable
        ref="schemaTableRef"
        :columns="columns"
        :data="loadData"
        :style="{width:'100%'}"
        row-key="templateCode"
      >
        <!-- 操作 -->
        <template #action="scope">
          <el-switch v-model="scope.row.status" v-auth="'user_enable'" :active-value="1" :inactive-value="2" @change="(val)=>switchFn(val,scope.row.id)" />
          <el-button v-if="scope.row.status === 2" v-auth="'user_edit'" :style="{marginLeft: '10px'}" type="primary" text @click.stop="addFn(scope.row.id)">编辑</el-button>
        </template>
      </SchemaTable>
      <div class="page-wrap">
        <el-pagination
          v-model:currentPage="searchForm.pageIndex"
          v-model:page-size="searchForm.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next"
          @current-change="search"
          @size-change="handleSizeChange"
        />
      </div>
      <!-- 添加、编辑 -->
      <AddDialog
        ref="addDialogRef"
        @refresh-list="search"
      />
    </page-main>
  </div>
</template>

<script>
import useList from './composition/useList'
import useOperation from './composition/useOperation'
import AddDialog from './components/addDialog.vue'

export default {
  components: { AddDialog },
  setup() {
    return {
      ...useList(), // 初始化渲染，条件搜索，表格渲染，分页
      ...useOperation() // 搜索表格页按钮、操作
    }
  }
}

</script>

<style scoped lang="scss">
.page-wrap {
  padding: 10px 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  border-radius: 4px;
}
.list-wrap {
  flex: 1;
  overflow: auto;
  height: 100%;
}
li::marker {
  color: #47d4c9;
}
.color::marker {
  color: #e86969;
}
</style>

